<!DOCTYPE HTML>
<html>
	<head>
		<!-- META -->
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0">
		<meta name="mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-capable" content="yes">

		<!-- TITLE -->
		<title>Bitsy</title>

		<!-- APP -->
		<link rel="icon" type="image/png" href="image/cat5.png">
		<link rel="apple-touch-icon" href="image/apple-touch-icon.png">

		<!-- STYLES -->
		<link rel="stylesheet" type="text/css" href="style/bitsyEditorStyle.css">
		<link rel="stylesheet" type="text/css" href="style/colorsToolStyle.css">
		<link rel="stylesheet" type="text/css" href="style/dataToolStyle.css">
		<link rel="stylesheet" type="text/css" href="style/dialogToolStyle.css">
		<link rel="stylesheet" type="text/css" href="style/exitsToolStyle.css">
		<link rel="stylesheet" type="text/css" href="style/gifToolStyle.css">
		<link rel="stylesheet" type="text/css" href="style/paintToolStyle.css">
		<link rel="stylesheet" type="text/css" href="style/settingsToolStyle.css">

		<!-- GENERATED -->
		<script src="script/generated/resources.js"></script>

		<!-- SYSTEM -->
		<script src="script/system/input.js"></script>
		<script src="script/system/soundchip.js"></script>
		<script src="script/system/graphics.js"></script>
		<script src="script/system/system.js"></script>

		<!-- ENGINE -->
		<script src="script/engine/world.js"></script>
		<script src="script/engine/sound.js"></script>
		<script src="script/engine/font.js"></script>
		<script src="script/engine/transition.js"></script>
		<script src="script/engine/script.js"></script>
		<script src="script/engine/dialog.js"></script>
		<script src="script/engine/renderer.js"></script>
		<script src="script/engine/bitsy.js"></script>

		<!-- EDITOR SCRIPTS -->
		<script src="script/tools/about.js"></script>
		<script src="script/store.js"></script>
		<script src="script/util.js"></script>
		<script src="script/icons.js"></script>
		<script src="script/thumbnail.js"></script>
		<script src="script/mouse.js"></script>
		<script src="script/menu.js"></script>
		<script src="script/card.js"></script>
		<script src="script/paint.js"></script>
		<script src="script/room_markers.js"></script>
		<script src="script/find.js"></script>
		<script src="script/localization.js"></script>
		<script src="script/event_manager.js"></script>
		<script src="script/palette.js"></script>
		<script src="script/color_picker.js"></script>
		<script src="script/gif.js"></script>
		<script src="script/exporter.js"></script>
		<script src="script/dialog_editor.js"></script>
		<script src="script/editor.js"></script>
		<script src="script/inventory.js"></script>

		<!-- TOOLS -->
		<script src="script/tools/room.js"></script>
		<script src="script/tools/tune.js"></script>
		<script src="script/tools/blip.js"></script>

		<!-- FONTS -->
		<link href="style/googleNunito.css" rel="stylesheet">
	</head>
 
	<body onload="start()">

		<div id="appRoot">

		<div id="topbar">

			<div id="topbarMain" style="width:100%;display:block;overflow:auto;">

				<div id="topbarFlexContainer">

					<div id="logoFlexItem">
						<span title="Bitsy ~ make little worlds ~" id="bitsyLogoTitle">
							<img id="bitsyLogo" src="image/cat.svg" onclick="window.open('https://www.bitsy.org');" style="cursor: pointer;" />
							<span id="bitsyTitle" class="localize bitsy_title">Bitsy</span>
						</span>
					</div>

					<div id="titleFlexItem" class="bitsy-playmode-disable">
						<div class="titleWidgetContainer"></div>
					</div>

					<!-- show tools -->
					<input type="checkbox" value="toolsPanel" id="toolsCheck" onclick="toggleToolBar(event);" autocomplete="off" />
					<label title="show / hide toolbar" for="toolsCheck" id="toolsCheckLabel" class="bitsy-menu-label">
						<span class="bitsy_icon">tool</span>
						<span id="toolsCheckLabelText" class="localize tools_label">tools</span>
					</label>

					<!-- play -->
					<input type="checkbox" id="playModeCheck" onclick="togglePlayMode(event);" autocomplete="off" />
					<label title="play / pause game" for="playModeCheck" class="bitsy-menu-label">
						<span id="playModeIcon" class="bitsy_icon">play</span>
						<span id="playModeText" class="localize play_game">play</span> <!-- TODO LOCALIZE: also stop_game -->
					</label>

				</div>

			</div>

			<div id="toolsPanel">

				<input type="checkbox" value="aboutPanel" id="aboutCheck" onclick="togglePanelAnimated(event);" autocomplete="off" checked/>
				<label title="show / hide about window" for="aboutCheck">
					<span class="bitsy_icon icon_space_right">about</span>
					<span class="localize about_tool_name">about</span>
				</label>

				<input type="checkbox" value="exitsPanel" id="exitsCheck" onclick="togglePanelAnimated(event);" autocomplete="off" />
				<label title="show / hide exits & endings window" for="exitsCheck">
					<span class="bitsy_icon icon_space_right">exits_endings</span>
					<span class="localize marker_tool_name">exits & endings</span>
				</label>

				<input type="checkbox" value="paintPanel" id="paintCheck" onclick="togglePanelAnimated(event);" autocomplete="off" checked/>
				<label title="show / hide paint window" for="paintCheck">
					<span class="bitsy_icon icon_space_right">paint</span>
					<span class="localize paint_tool_name">paint</span>
				</label>

				<input type="checkbox" value="colorsPanel" id="colorsCheck" onclick="togglePanelAnimated(event);" autocomplete="off" checked/>
				<label title="show / hide color palette window" for="colorsCheck">
					<span class="bitsy_icon icon_space_right">colors</span>
					<span class="localize palette_tool_name">colors</span>
				</label>

				<input type="checkbox" value="dialogPanel" id="dialogCheck" onclick="togglePanelAnimated(event);" autocomplete="off" checked/>
				<label title="show / hide dialog window" for="dialogCheck">
					<span class="bitsy_icon icon_space_right">dialog</span>
					<span class="localize dialog_tool_name">dialog</span>
				</label>

				<input type="checkbox" value="findPanel" id="findCheck" onclick="togglePanelAnimated(event);" autocomplete="off" />
				<label title="show / hide find window" for="findCheck">
					<span class="bitsy_icon icon_space_right">search</span>
					<span class="localize find_tool">find</span>
				</label>

				<input type="checkbox" value="inventoryPanel" id="inventoryCheck" onclick="togglePanelAnimated(event);" autocomplete="off" checked/>
				<label title="show / hide inventory window" for="inventoryCheck">
					<span class="bitsy_icon icon_space_right">item</span>
					<span class="localize inventory_tool_name">inventory</span>
				</label>
				
				<input type="checkbox" value="downloadPanel" id="downloadCheck" onclick="togglePanelAnimated(event);" autocomplete="off" checked/>
				<label title="show / hide download window" for="downloadCheck">
					<span class="bitsy_icon icon_space_right">file</span>
					<span class="localize download_tool_name">download</span>
				</label>
				
				<input type="checkbox" value="gifPanel" id="gifCheck" onclick="togglePanelAnimated(event);" autocomplete="off" />
				<label title="show / hide gif recording window" for="gifCheck">
					<span class="bitsy_icon icon_space_right">record</span>
					<span class="localize gif_tool_name">record gif</span>
				</label>
				
				<input type="checkbox" value="dataPanel" onclick="togglePanelAnimated(event);" id="dataCheck" autocomplete="off" />
				<label title="show / hide game data window" for="dataCheck">
					<span class="bitsy_icon icon_space_right">game_data</span>
					<span class="localize data_tool_name">game data</span>
				</label>

				<input type="checkbox" value="settingsPanel" onclick="togglePanelAnimated(event);" id="settingsCheck" autocomplete="off" />
				<label title="show / hide settings window" for="settingsCheck">
					<span class="bitsy_icon icon_space_right">settings</span>
					<span class="localize settings_tool_name">settings</span>
				</label>

				<button id="resetGameButton" title="reset everything and start new game" onclick="newGameDialog();">
					<span class="bitsy_icon">new_game</span>
					<span class="localize reset_game">new game</span>
				</button>
			</div>
		</div>

		<div id="unsupportedFeatures" class="warning" style="display:none;">
			<span class="localize unsupported_features">uh oh ~ your browser doesn't support all of bitsy's features, so some things might not work right. maybe try another browser, such as:</span>
			<a href="https://www.google.com/chrome/browser" target="_blank">
				<span class="localize browser_chrome">chrome</span>
			</a>,
			<a href="https://www.mozilla.org/firefox" target="_blank">
				<span class="localize browser_firefox">firefox</span>
			</a>
			<button onclick="hideUnsupportedFeatureWarning();">
				<span class="localize unsupported_features_dismiss">I'll be ok, hide this message</span>
			</button>
		</div>

		<div id="fontMissingCharacter" class="warning" style="display:none;">
			<div>
				<span class="localize font_missing_character">The current font is missing some of the characters used in your dialog. Not all text in your game will display correctly. Consider picking a different font in the settings.</span>
			</div>
			<div>
				<button onclick="showPanel('settingsPanel');">
					<span class="bitsy_icon">open_tool</span>
					<span class="localize open_settings">open settings</span>
				</button>
				<button onclick="hideFontMissingCharacterWarning();">
					<span class="bitsy_icon">close</span>
					<span class="localize close_label">close</span>
				</button>
			</div>
		</div>

		<div id="editorWindow" onmousewheel="blockScrollBackpage(event);">
			<div id="editorContent">

				<div id="aboutPanel" class="bitsy-card bitsy-card-m bitsy-workbench-item">
					<div class="bitsy-card-titlebar">
						<span class="bitsy_icon">about</span>

						<span class="bitsy-card-title" title="about window" onmousedown="grabCard(event);">
							<span class="localize about_tool_name">about</span>
						</span>


						<button title="open page in new tab" onclick="aboutOpenTab();">
							<span class="bitsy_icon">open_tool</span>
						</button>

						<button title="minimize about window" class="bitsy-card-close-button" onclick="hidePanel('aboutPanel');">
							<span class="bitsy_icon">close</span>
						</button>
					</div>

					<div id="aboutInner" class="bitsy-card-main">
						<iframe id="docsFrame" class="bitsy-menu-scrollview" height="100%"></iframe>
					</div>
				</div>

				<div id="exitsPanel" class="bitsy-card bitsy-card-m bitsy-workbench-item" style="display:none;">
					<div class="bitsy-card-titlebar">
						<span class="bitsy_icon">exits_endings</span>

						<span class="bitsy-card-title" title="exits & endings window" onmousedown="grabCard(event);">
							<span class="localize marker_tool_name">exits & endings</span>
						</span>

						<button title="show about page for exits & endings" onclick="showAbout('./tools/exitsandendings', 'exitsPanel');">
							<span class="bitsy_icon">help</span>
						</button>

						<button title="minimize exits & endings window" class="bitsy-card-close-button" onclick="hidePanel('exitsPanel');">
							<span class="bitsy_icon">close</span>
						</button>
					</div>

					<div id="exitsPanelContent" class="bitsy-card-main">
						<div id="markersControls" class="navControl">
							<!-- exit # display -->
							<input type="text" id="markerName" size="5" readonly></input>

							<!-- prev / next -->
							<button title="previous" class="color0" onclick="prevMarker();">
								<span class="bitsy_icon">previous</span>
							</button>
							<button title="next" class="color0" onclick="nextMarker();">
								<span class="bitsy_icon">next</span>
							</button>

							<!-- add / copy / dlete -->
							<button title="add exit or ending" class="color0" onclick="startAddMarker();">
								<span class="bitsy_icon">add</span>
							</button>

							<button title="duplicate exit or ending" class="color0" onclick="duplicateMarker();">
								<span class="bitsy_icon">copy</span>
							</button>

							<button title="delete" class="color0" onclick="deleteMarker();">
								<span class="bitsy_icon">delete</span>
							</button>
						</div>
						<!-- todo : move style elsewhere -->
						<div id="addMarkerOptions" class="controlBox" style="display: flex; flex-direction: column; min-width: 300px">
							<button title="add two-way exit" class="bitsy-menu-label" onclick="newExit();">
								<span class="bitsy_icon">add</span>
								<span id="addExitText" class="localize exit_label">exit</span>
							</button>
							<button title="add one-way exit" class="bitsy-menu-label" onclick="newExitOneWay();">
								<span class="bitsy_icon">add</span>
								<span id="addExitText" class="localize exit_one_way_label">one-way exit</span>
							</button>
							<button title="add ending" class="bitsy-menu-label" onclick="newEnding();">
								<span class="bitsy_icon">add</span>
								<span class="localize ending_label">ending</span>
							</button>
							<!-- TODO : need a general cancel button style -->
							<button title="cancel" class="cancelButton bitsy-menu-label" onclick="cancelAddMarker();">
								<span class="bitsy_icon">cancel</span>
								<span class="localize action_cancel">cancel</span>
							</button>
						</div>
						<div id="noMarkerMessage" class="controlBox">
							<div style="display: flex; flex-direction: row; margin-bottom: 10px;">
								<span id="spacer" style="flex-grow: 1;"></span>
								<img src="image/cat.svg" height="64px" width="64px" />
								<span id="spacer" style="flex-grow: 1;"></span>
							</div>
							<span class="localize marker_tool_empty">There are no exits or endings in this room yet! You can add one with this tool. :)</span>
						</div>
						<div id="markersSelect">
							<div id="markerControl1" class="controlBox">
								<span>
									<span id="markerIcon1"></span>
									<span id="markerName1">marker 1</span>
								</span>

								<canvas id="markerCanvas1" title="location of marker (click to go to room)" onclick="selectMarkerRoom1();" style="margin-top: 5px; image-rendering: pixelated;"></canvas>

								<div class="markerPosControl">
									<div class="markerCoordinatesHolder" title="marker coordinates">
										<span id="textMarkerPos1">room 0 (0,0)</span>
										<span id="textMoveMessage1">
											<i class="localize marker_move_click">click in room</i>
										</span>
									</div>
									<div title="marker controls">
										<input type="checkbox" id="toggleMoveMarker1" onclick="toggleMoveMarker1(event);" autocomplete="off" />
										<label for="toggleMoveMarker1" title="click to place marker in current room">
											<span id="toggleMoveMarkerIcon1" class="bitsy_icon">set_exit_location</span>
											<span class="localize marker_move">move</span>
										</label>

										<input type="checkbox" id="toggleEditMarker1" autocomplete="off" />
										<label for="toggleEditMarker1" title="edit coordinates">
											<span class="bitsy_icon">edit</span>
										</label>

										<span id="exitOptionsToggle1">
											<input type="checkbox" id="exitOptionsToggleCheck1" onclick="toggleExitOptions(0, event.target.checked);" autocomplete="off" />
											<label title="show / hide exit options" for="exitOptionsToggleCheck1">
												<span class="bitsy_icon">settings</span>
											</label>
										</span>
									</div>
									<div id="editControlsMarker1" title="edit coordinates" style="margin-top: 5px; display: none;">
										<div>
											<span class="localize room_label">room</span>: 
											<select id="editRoomMarker1"></select>
										</div>
										<div>
											<span class="localize axis_x_label">x</span>: 
											<input id="editPosXMarker1" type="number" min="0" max="15" style="width:6ch;"></input>
										</div>
										<div>
											<span class="localize axis_y_label">y</span>: 
											<input id="editPosYMarker1" type="number" min="0" max="15" style="width:6ch;"></input>
										</div>
									</div>
								</div>
							</div>
							<div id="markerLinkControl">
								<button title="change exit direction" onclick="changeExitDirection();">
									<span id="exitDirectionIcon" class="bitsy_icon">exit_one_way</span>
								</button>
							</div>
							<div id="markerControl2" class="controlBox" style="display: flex; flex-direction: column;">
								<span>
									<span id="markerIcon2"></span>
									<span id="markerName2">marker 2</span>
								</span>

								<canvas id="markerCanvas2" title="location of marker (click to go to room)" onclick="selectMarkerRoom2();" style="margin-top: 5px; image-rendering: pixelated;"></canvas>

								<div class="markerPosControl">
									<div class="markerCoordinatesHolder" title="marker coordinates">
										<span id="textMarkerPos2">room 0 (0,0)</span>
										<span id="textMoveMessage2">
											<i class="localize marker_move_click">click in room</i>
										</span>
									</div>
									<div title="marker controls">
										<input type="checkbox" id="toggleMoveMarker2" onclick="toggleMoveMarker2(event);" autocomplete="off" />
										<label for="toggleMoveMarker2" title="click to move marker">
											<span id="toggleMoveMarkerIcon2" class="bitsy_icon">set_exit_location</span>
											<span class="localize marker_move">move</span>
										</label>

										<input type="checkbox" id="toggleEditMarker2" autocomplete="off" />
										<label for="toggleEditMarker2" title="edit coordinates">
											<span class="bitsy_icon">edit</span>
										</label>

										<span id="exitOptionsToggle2">
											<input type="checkbox" id="exitOptionsToggleCheck2" onclick="toggleExitOptions(1, event.target.checked);" autocomplete="off" />
											<label title="show / hide exit options" for="exitOptionsToggleCheck2">
												<span class="bitsy_icon">settings</span>
											</label>
										</span>

										<span id="exitOptionsToggle1_alt">
											<input type="checkbox" id="exitOptionsToggleCheck1_alt" onclick="toggleExitOptions(0, event.target.checked);" autocomplete="off" />
											<label title="show / hide exit options" for="exitOptionsToggleCheck1_alt">
												<span class="bitsy_icon">settings</span>
											</label>
										</span>
									</div>
									<div id="editControlsMarker2" title="edit coordinates" style="margin-top: 5px; display: none;">
										<div>
											<span class="localize room_label">room</span>: 
											<select id="editRoomMarker2"></select>
										</div>
										<div>
											<span class="localize axis_x_label">x</span>: 
											<input id="editPosXMarker2" type="number" min="0" max="15" style="width:6ch;"></input>
										</div>
										<div>
											<span class="localize axis_y_label">y</span>: 
											<input id="editPosYMarker2" type="number" min="0" max="15" style="width:6ch;"></input>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div id="markerOptions">
							<div id="endingOptions">
								<div id="endingDialogWidget">
								</div>
							</div>
							<div id="exitOptions">
								<div>
									<span class="bitsy_icon">exit_one_way</span>
									<span>exit options:</span> <!-- TODO : localize -->
								</div>

								<div title="select transition effect" class="controlBox">
									<span class="bitsy_icon">transition_effect</span>
									<span class="localize exit_transition_label">transition effect</span>: 
									<select id="exitTransitionEffectSelect" onchange="onChangeExitTransitionEffect(event.target.value, 0);">
										<option value="none">none</option>
										<option value="fade_w">fade (white)</option>
										<option value="fade_b">fade (black)</option>
										<option value="wave">wave</option>
										<option value="tunnel">tunnel</option>
										<option value="slide_u">slide up</option>
										<option value="slide_d">slide down</option>
										<option value="slide_l">slide left</option>
										<option value="slide_r">slide right</option>
									</select>
								</div>

								<div id="exitDialogControls">
								</div>
							</div>
							<div id="returnExitOptions" style="margin-top: 10px">
								<div>
									<span class="bitsy_icon">exit_one_way_reverse</span>
									<span>return exit options:</span> <!-- TODO : localize -->
								</div>

								<div title="select transition effect" class="controlBox">
									<span class="bitsy_icon">transition_effect</span>
									<span class="localize exit_transition_label">transition effect</span>: 
									<select id="returnExitTransitionEffectSelect" onchange="onChangeExitTransitionEffect(event.target.value, 1);">
										<option value="none">none</option>
										<option value="fade_w">fade (white)</option>
										<option value="fade_b">fade (black)</option>
										<option value="wave">wave</option>
										<option value="tunnel">tunnel</option>
										<option value="slide_u">slide up</option>
										<option value="slide_d">slide down</option>
										<option value="slide_l">slide left</option>
										<option value="slide_r">slide right</option>
									</select>
								</div>

								<div id="returnExitDialogControls">
								</div>
							</div>
						</div>
					</div>
				</div>

				<div id="paintPanel" class="bitsy-card bitsy-card-s bitsy-workbench-item">
					<div class="bitsy-card-titlebar">
						<span class="bitsy_icon">paint</span>

						<span class="bitsy-card-title" title="paint window" onmousedown="grabCard(event);">
							<span class="localize paint_tool_name">paint</span>
						</span>

						<button title="show about page for paint" onclick="showAbout('./tools/paint', 'paintPanel');">
							<span class="bitsy_icon">help</span>
						</button>

						<button title="minimize paint window" class="bitsy-card-close-button" onclick="hidePanel('paintPanel');">
							<span class="bitsy_icon">close</span>
						</button>
					</div>

					<div class="bitsy-card-main">
						<form id="paintModeRadio" class="bitsy-menu-group">
							<input type="radio" name="paint mode" value="avatar" onclick="on_paint_avatar();" id="paintOptionAvatar" checked>
							<label title="edit the avatar: the player's character" for="paintOptionAvatar" class="left">
								<span class="bitsy_icon icon_space_right">avatar</span>
								<span class="localize avatar_label">avatar</span>
							</label>

							<input type="radio" name="paint mode" value="tile" onclick="on_paint_tile();" id="paintOptionTile">
							<label title="edit tiles: pieces of scenery" for="paintOptionTile" class="middle">
								<span class="bitsy_icon icon_space_right">tile</span>
								<span class="localize tile_label">tile</span>
							</label>

							<input type="radio" name="paint mode" value="sprite" onclick="on_paint_sprite();" id="paintOptionSprite">
							<label title="edit sprites: non-player characters and interactive objects" for="paintOptionSprite" class="middle">
								<span class="bitsy_icon icon_space_right">sprite</span>
								<span class="localize sprite_label">sprite</span>
							</label>

							<input type="radio" name="paint mode" value="item" onclick="on_paint_item();" id="paintOptionItem">
							<label title="edit items: things the player can pick up" for="paintOptionItem" class="right">
								<span class="bitsy_icon icon_space_right">item</span>
								<span class="localize item_label">item</span>
							</label>
							
						</form>

						<div id="paintNavigationControls" class="navControl">
							<!-- name -->
							<input title="a name to refer to this drawing" type="text" id="drawingName" class="textInputField" onchange="on_drawing_name_change();"></input>

							<!-- prev / next -->
							<button title="previous drawing" class="color0 disableForAvatar" onclick="prev();">
								<span class="bitsy_icon">previous</span>
							</button>

							<button title="next drawing" class="color0 disableForAvatar" onclick="next();">
								<span class="bitsy_icon">next</span>
							</button>

							<!-- add / copy / delete -->
							<button title="add drawing" class="color0 disableForAvatar" onclick="newDrawing();">
								<span class="bitsy_icon">add</span>
							</button>

							<button title="duplicate drawing" class="color0 disableForAvatar" onclick="duplicateDrawing();">
								<span class="bitsy_icon">copy</span>
							</button>

							<button title="delete drawing" class="color0 disableForAvatar" onclick="deleteDrawing();">
								<span class="bitsy_icon">delete</span>
							</button>

							<!-- find -->
							<button title="open find tool: drawings" onclick="openFindToolWithCurrentPaintCategory();">
								<span class="bitsy_icon">search</span>
							</button>
						</div>

						<canvas id="paint"></canvas>

						<div id="paintEditMain">
							<div class="buttonGroup">
								<input type="checkbox" id="paintGridCheck" onclick="togglePaintGrid(event);" autocomplete="off" checked/>
								<label title="show / hide grid" for="paintGridCheck" class="bitsy-menu-label">
									<span id="paintGridIcon" class="bitsy_icon">visibility</span>
									<span class="localize grid_toggle_visible">grid</span>
								</label>
								<button id="showInventoryButton" title="show inventory" class="bitsy-menu-label" onclick="showPanel('inventoryPanel', 'paintPanel');">
									<span class="bitsy_icon">item</span>
									<span class="localize inventory_tool_name">inventory</span>
								</button>
							</div>
						</div>

						<div id="wall" class="controlBox" style="display:none;">
							<input type="checkbox" id="wallCheckbox" onchange="on_toggle_wall(event);" autocomplete="off" >
							<label title="make tile an impassible wall" for="wallCheckbox" class="bitsy-menu-label">
								<span id="wallCheckboxIcon" class="bitsy_icon">wall_off</span>
								<span class="localize wall_toggle">wall</span>
							</label>
						</div>

						<div id="dialog" style="display:none;">
						</div>

						<div id="animationOuter" class="controlBox">
							<div id="isAnimated">
								<input type="checkbox" id="animatedCheckbox" onchange="on_toggle_animated();" autocomplete="off" >
								<label title="add animation to drawing" for="animatedCheckbox">
									<span class="localize animation_title">animation</span>
									<span id="animatedCheckboxIcon" class="bitsy_icon" style="margin-left: var(--bitsy-space-s);">expand_less</span>
								</label>
							</div>
							<div id="animation" style="display:none;">
								<div class="bitsy-menu-group">
									<div class="bitsy-thumbnail">
										<div class="bitsy-thumbnail-image-container">
											<img id="animationThumbnailPreview" />
										</div>
										<label class="bitsy-menu-label">
											<span class="localize animation_preview">preview</span>
										</label>
									</div>
									<div id="animationKeyframe1" class="bitsy-thumbnail" onclick="on_paint_frame1();">
										<div class="bitsy-thumbnail-image-container">
											<img id="animationThumbnailFrame1" />
										</div>
										<label class="bitsy-menu-label">
											<span class="localize animation_frame1">frame 1</span>
										</label>
									</div>
									<div id="animationKeyframe2" class="bitsy-thumbnail" onclick="on_paint_frame2();">
										<div class="bitsy-thumbnail-image-container">
											<img id="animationThumbnailFrame2" />
										</div>
										<label class="bitsy-menu-label">
											<span class="localize animation_frame2">frame 2</span>
										</label>
									</div>
								</div>
							</div>
						</div>

						<div id="newPaintMenu" class="bitsy-menu"></div>
					</div>
				</div>

				<div id="findPanel" class="bitsy-card bitsy-card-m bitsy-workbench-item">
					<div class="bitsy-card-titlebar">
						<span class="bitsy_icon">search</span>

						<span class="bitsy-card-title" title="find window" onmousedown="grabCard(event);">
							<span class="localize find_tool">find</span>
						</span>

						<button title="show about page for find" onclick="showAbout('./tools/find', 'findPanel');">
							<span class="bitsy_icon">help</span>
						</button>

						<button title="minimize find window" class="bitsy-card-close-button" onclick="hidePanel('findPanel');">
							<span class="bitsy_icon">close</span>
						</button>
					</div>

					<div id="findPanelMain" class="bitsy-card-main">
					</div>
				</div>

				<div id="colorsPanel" class="bitsy-card bitsy-workbench-item">
					<div class="bitsy-card-titlebar">
						<span class="bitsy_icon">colors</span>

						<span class="bitsy-card-title" title="color palette window" onmousedown="grabCard(event);">
							<span class="localize palette_tool_name">colors</span>
						</span>

						<button title="show about page for colors" onclick="showAbout('./tools/color', 'colorsPanel');">
							<span class="bitsy_icon">help</span>
						</button>

						<button title="minimize color palette window" class="bitsy-card-close-button" onclick="hidePanel('colorsPanel');">
							<span class="bitsy_icon">close</span>
						</button>
					</div>

					<div class="bitsy-card-main">
						<div class="navControl">
							<!-- name -->
							<input type="text" id="paletteName" title="a name to refer to this color palette" class="textInputField" onchange="on_palette_name_change(event);" size="10"></input>

							<!-- prev / next -->
							<button title="previous color palette" class="color0" onclick="prevPalette();">
								<span class="bitsy_icon">previous</span>
							</button>
							<button title="next color palette" class="color0" onclick="nextPalette();">
								<span class="bitsy_icon">next</span>
							</button>

							<!-- add / copy / delete -->
							<button title="add new color palette" class="color0" onclick="newPalette();">
								<span class="bitsy_icon">add</span>
							</button>
							<button title="duplicate palette" class="color0" onclick="duplicatePalette();">
								<span class="bitsy_icon">copy</span>
							</button>
							<button title="delete palette" class="color0" onclick="deletePalette();">
								<span class="bitsy_icon">delete</span>
							</button>

							<!-- find -->
							<button title="open find tool: colors" onclick="openFindTool('PAL', 'colorsPanel');">
								<span class="bitsy_icon">search</span>
							</button>
						</div>

						<form id="colorPaletteForm">
							<input type="radio" name="colorPalette" value="background" id="colorPaletteOptionBackground" onclick="changeColorPickerIndex(0);" checked>
							<label id="colorPaletteLabelBackground" for="colorPaletteOptionBackground" title="pick background color">
								<span class="bitsy_icon icon_space_right">room</span>
								<span class="localize palette_background">background color</span>
							</label>

							<input type="radio" name="colorPalette" value="background" id="colorPaletteOptionTile" onclick="changeColorPickerIndex(1);">
							<label id="colorPaletteLabelTile" for="colorPaletteOptionTile" title="pick tile color">
								<span class="bitsy_icon icon_space_right">tile</span>
								<span class="localize palette_tile">tile color</span>
							</label>

							<input type="radio" name="colorPalette" value="background" id="colorPaletteOptionSprite" onclick="changeColorPickerIndex(2);">
							<label id="colorPaletteLabelSprite" for="colorPaletteOptionSprite" title="pick sprite / avatar / item color">
								<span class="bitsy_icon icon_space_right">sprite</span>
								<span class="localize palette_sprite">sprite color</span>
							</label>
						</form>

						<div id="colorPicker" title="color picker">
							<canvas id="colorPickerWheel"></canvas>
							<canvas id="colorPickerSelect" title="color picker wheel"></canvas>
							<div id="colorPickerSliderBg" title="color picker darkness / lightness slider">
								<div id="colorPickerSliderThumb"></div>
							</div>
							<input id="colorPickerHexText" class="textInputField" title="color picker hex code" type="text" />
						</div>
					</div>
				</div>

				<div id="dialogPanel" class="bitsy-card bitsy-card-m bitsy-workbench-item">
					<div class="bitsy-card-titlebar">
						<span class="bitsy_icon">dialog</span>

						<span class="bitsy-card-title" title="dialog window" onmousedown="grabCard(event);">
							<span class="localize dialog_tool_name">dialog</span>
						</span>

						<button title="show about page for dialog" onclick="showAbout('./tools/dialog', 'dialogPanel');">
							<span class="bitsy_icon">help</span>
						</button>

						<button title="minimize dialog window" class="bitsy-card-close-button" onclick="hidePanel('dialogPanel');">
							<span class="bitsy_icon">close</span>
						</button>
					</div>

					<div class="bitsy-card-main">
						<div id="dialogEditorHasContent">
							<div class="navControl">
								<!-- NOTE : disabled until I can make it work better -->
								<!-- preview -->
								<!-- <input type="checkbox" id="previewDialogCheck" onclick="togglePreviewDialog(event);" autocomplete="off" />
								<label title="preview dialog" for="previewDialogCheck">
									<span id="previewDialogIcon" class="bitsy_icon">play</span>
									<span id="previewDialogText" class="localize dialog_start_preview">preview</span>
								</label> --> <!-- TODO LOCALIZE : other state? dialog_stop_preview -->

								<!-- name -->
								<input type="text" id="dialogName" title="a name to refer to this dialog" class="textInputField" onchange="onDialogNameChange(event);" size="10"></input>

								<!-- prev / next -->
								<button title="previous dialog" class="color0" onclick="prevDialog();">
									<span class="bitsy_icon">previous</span>
								</button>
								<button title="next dialog" class="color0" onclick="nextDialog();">
									<span class="bitsy_icon">next</span>
								</button>

								<!-- add / copy / delete -->
								<button title="add new dialog" class="color0" onclick="addNewDialog();">
									<span class="bitsy_icon">add</span>
								</button>
								<button title="duplicate dialog" class="color0" onclick="duplicateDialog();">
									<span class="bitsy_icon">copy</span>
								</button>
								<button id="deleteDialogButton" title="delete dialog" class="color0" onclick="deleteDialog();">
									<span class="bitsy_icon">delete</span>
								</button>

								<!-- find -->
								<button title="open find tool: dialog" onclick="openFindTool('DLG', 'dialogPanel');">
									<span class="bitsy_icon">search</span>
								</button>
							</div>

							<div id="dialogEditor">
							</div>

							<div id="dialogOptions">
								<input type="checkbox" id="dialogShowCodeCheck" onclick="toggleDialogCode(event);" autocomplete="off">
								<label title="show / hide the code for this dialog" for="dialogShowCodeCheck">
									<span class="bitsy_icon">code_edit</span>
									<span id="dialogToggleCodeShowText" class="localize dialog_show_code">show code</span> 
									<span id="dialogToggleCodeHideText" class="localize dialog_hide_code" style="display:none;">hide code</span>
								</label>

								<input type="checkbox" id="dialogAlwaysShowDrawingCheck" onclick="toggleAlwaysShowDrawingDialog(event);" autocomplete="off" checked>
								<label title="always show dialog of selected drawing" for="dialogAlwaysShowDrawingCheck">
									<!-- TODO : bitsy_icon --- need a special icon for this case -->
									<span class="bitsy_icon">paint</span>
									<!-- todo : localize -->
									<!-- <span id="dialogToggleCodeShowText"></span> --> <!-- TODO ?? --> 
								</label>
							</div>
						</div>

						<div id="dialogEditorNoContent" class="controlBox" style="display:none;">
							<span class="localize dialog_no_selection">Select a sprite or item to edit its dialog.</span>
						</div>
					</div>
				</div>

				<div id="inventoryPanel" class="bitsy-card bitsy-card-s bitsy-workbench-item bitsy-playmode-enable">
					<div class="bitsy-card-titlebar">
						<span class="bitsy_icon">item</span>

						<span class="bitsy-card-title" title="inventory window" onmousedown="grabCard(event);">
							<span class="localize inventory_tool_name">inventory</span>
						</span>

						<button title="show about page for inventory" onclick="showAbout('./tools/inventory', 'inventoryPanel');">
							<span class="bitsy_icon">help</span>
						</button>

						<button title="minimize inventory window" class="bitsy-card-close-button" onclick="hidePanel('inventoryPanel');">
							<span class="bitsy_icon">close</span>
						</button>
					</div>

					<div class="bitsy-card-main">
						<!-- TODO -->
						<div class="bitsy-menu-group">
							<form>
								<input type="radio" name="inventory mode" value="item" onclick="showInventoryItem();" id="inventoryOptionItem" checked>
								<label title="items: set count of items the player starts with" for="inventoryOptionItem" class="left">
									<span class="bitsy_icon">item</span>
									<span class="localize items_label">items</span>
								</label>
								<input type="radio" name="inventory mode" value="variable" onclick="showInventoryVariable()" id="inventoryOptionVariable">
								<label title="variables: set initial values of variables" for="inventoryOptionVariable" class="right">
									<!-- TODO : bitsy_icon -- does this need its own special icon? -->
									<span class="bitsy_icon">code_edit</span>
									<span class="localize variables_label">variables</span>
								</label>
							</form>
						</div>

						<div id="inventoryItem" class="bitsy-menu-scrollview">
						</div>

						<div id="inventoryVariable" class="bitsy-menu-scrollview" style="display:none;">
						</div>
					</div>
				</div>

				<div id="downloadPanel" class="bitsy-card bitsy-workbench-item">
					<div class="bitsy-card-titlebar">
						<span class="bitsy_icon">file</span>

						<span class="bitsy-card-title" title="download window" onmousedown="grabCard(event);">
							<span class="localize download_tool_name">download</span>
						</span>

						<button title="show about page for download" onclick="showAbout('./tools/download', 'downloadPanel');">
							<span class="bitsy_icon">help</span>
						</button>

						<button title="minimize download window" class="bitsy-card-close-button" onclick="hidePanel('downloadPanel');">
							<span class="bitsy_icon">close</span>
						</button>
					</div>

					<div class="bitsy-card-main">
						<div style="margin-bottom: var(--bitsy-space-s);">
							<span class="localize download_html" style="margin-bottom: var(--bitsy-space-s);">download game as html file:</span>
							<br>
							<button title="download game as html file" class="color0" onclick="exportGame();">
								<span class="bitsy_icon">download</span>
								<span class="localize download_game">download game</span>
							</button>
						</div>

						<div style="margin-bottom: var(--bitsy-space-s);">
							<span class="localize import_html" style="margin-bottom: var(--bitsy-space-s);">import game from html file:</span>
							<br style="margin-bottom: var(--bitsy-space-s);">
							<label for="importGamePicker" class="filePickerLabel" title="import game from html file on your computer">
								<span class="bitsy_icon">upload</span>
								<span class="localize upload_game">upload game</span>
							</label>
							<input type="file" accept=".html" id="importGamePicker" style="display:none;" onchange="importGameFromFile(event);"/>
						</div>

						<!-- TODO LOCALIZE - word wrap -->
						<div id="downloadHelp" class="helpMessage" style="display:none;">
							Note: your browser doesn't support<br>
							direct downloads, so sharing requires<br>
							some extra steps:<br>
							- press share <br>
							- a new tab will open <br>
							- save that tab <br>
							- name it "mygame.html" <br>
							- share your game as a web page!
						</div>
					</div>
				</div>

				<div id="gifPanel" class="bitsy-card bitsy-card-m bitsy-workbench-item bitsy-playmode-enable" style="display:none;">
					<div class="bitsy-card-titlebar">
						<span class="bitsy_icon">record</span>

						<span class="bitsy-card-title" title="gif recording window" onmousedown="grabCard(event);">
							<span class="localize gif_tool_name">record gif</span>
						</span>

						<button title="show about page for record gif" onclick="showAbout('./tools/recordgif', 'gifPanel');">
							<span class="bitsy_icon">help</span>
						</button>

						<button title="minimize gif recording window" class="bitsy-card-close-button" onclick="hidePanel('gifPanel');">
							<span class="bitsy_icon">close</span>
						</button>
					</div>

					<div class="bitsy-card-main">
						<div class="bitsy-menu-group">
							<button title="start recording a gif of your game" class="color0" id="gifStartButton" onclick="startRecordingGif();">
								<span class="bitsy_icon">record</span>
								<span class="localize gif_start">start recording</span>
							</button>

							<button title="stop recording a gif of your game" class="color0" id="gifStopButton" onclick="stopRecordingGif();" style="display:none;">
								<span class="bitsy_icon">record_stop</span>
								<span class="localize gif_stop">stop recording</span>
							</button>

							<span id="gifRecordingText" style="display:none;">
								<span class="bitsy_icon_anim">record_on</span>
								<span class="localize gif_recording">recording...</span>
							</span>

							<span id="gifEncodingText" style="display:none;">
								<span class="bitsy_icon_anim">record_processing</span>
								<span class="localize gif_encoding">encoding...</span> <span id="gifEncodingProgress">0</span>%
							</span>

							<button title="make screenshot of current room" class="color0" id="gifSnapshotButton" onclick="takeSnapshotGif(event);">
								<span class="bitsy_icon">record_snapshot</span>
								<span class="localize gif_snapshot">snapshot</span>
							</button>

							<button title="snapshot mode: square" id="gifSnapshotModeButton" onclick="toggleSnapshotMode();">
								<span id="gifSnapshotModeIcon" class="bitsy_icon">pagesize_full</span>
							</button>
						</div>

						<div id="gifPreviewContainer">
							<img id="gifPreview" style="display: none;" />
							<div id="gifPlaceholder"></div>
						</div>

						<div class="bitsy-menu-group">
							<span class="bitsy_icon icon_space_right">download</span>
							<a title="download latest gif recording of your game" href="" download="recording.gif" id="gifDownload">
								<span class="localize gif_download">download gif</span>
							</a>
						</div>

					</div>
				</div>

				<div id="dataPanel" class="bitsy-card bitsy-card-m bitsy-workbench-item" style="display:none;">
					<div class="bitsy-card-titlebar">
						<span class="bitsy_icon">game_data</span>

						<span class="bitsy-card-title" title="game data window" onmousedown="grabCard(event);">
							<span class="localize data_tool_name">game data</span>
						</span>

						<button title="show about page for game data" onclick="showAbout('./tools/gamedata', 'dataPanel');">
							<span class="bitsy_icon">help</span>
						</button>

						<button title="minimize game data window" class="bitsy-card-close-button" onclick="hidePanel('dataPanel');">
							<span class="bitsy_icon">close</span>
						</button>
					</div>

					<div class="bitsy-card-main">
						<textarea title="raw text of the bitsy game data file (be careful when editing)" id="game_data" onchange="on_game_data_change();"></textarea>
						<div class="bitsy-menu-group">
							<input type="checkbox" id="fontDataCheck" onclick="toggleFontDataVisibility(event);" autocomplete="off" />
							<label title="show / hide font data (WARNING: can be very slow for large fonts)" for="fontDataCheck" class="bitsy-menu-label">
								<span id="fontDataIcon" class="bitsy_icon">visibility_off</span>
								<span class="localize font_data_toggle_visible">font data</span>
							</label>

							<button title="download game data" class="bitsy-menu-label" onclick="exportGameData();">
								<span class="bitsy_icon">download</span>
								<span class="localize download_data">download data</span>
							</button>

							<label for="importGameDataPicker" class="filePickerLabel" title="import game data from a .bitsy file on your computer">
								<span class="bitsy_icon">upload</span>
								<!-- todo: localize -->
								<span>upload data</span>
							</label>
							<input type="file" accept=".bitsy" id="importGameDataPicker" style="display: none;" onchange="importGameDataFromFile(event);" />
						</div>
					</div>
				</div>

				<div id="settingsPanel" class="bitsy-card bitsy-card-s bitsy-workbench-item" style="display:none;">
					<div class="bitsy-card-titlebar">
						<span class="bitsy_icon">settings</span>

						<span class="bitsy-card-title" title="settings window" onmousedown="grabCard(event);">
							<span class="localize settings_tool_name">settings</span>
						</span>

						<button title="show about page for settings" onclick="showAbout('./tools/settings', 'settingsPanel');">
							<span class="bitsy_icon">help</span>
						</button>

						<button title="minimize settings window" class="bitsy-card-close-button" onclick="hidePanel('settingsPanel');">
							<span class="bitsy_icon">close</span>
						</button>
					</div>

					<div id="settingsInner" class="bitsy-card-main">
						<div class="bitsy-menu">

							<div class="bitsy-menu-group">
								<span class="localize editor_settings">editor settings</span>
							</div>
							<div class="controlBox">
								<span class="localize language_label">language</span>:
								<select id="languageSelect" onchange="on_change_language(event);"></select>
								<br/>
								<span class="localize language_translator_credit" style="font-size: 80%;">English text by Adam Le Doux</span>
							</div>
							<div class="bitsy-menu-group">
								<span class="localize game_settings">game settings</span>
							</div>
							<div class="controlBox">
								<span class="localize font_label">font</span>:
								<select id="fontSelect" onchange="on_change_font(event);">
									<option value="ascii_small" class="localize font_ascii_small">ASCII Small</option>
									<option value="unicode_european_small" class="localize font_unicode_european_small">Unicode European Small</option>
									<option value="unicode_european_large" class="localize font_unicode_european_large">Unicode European Large</option>
									<option value="unicode_asian" class="localize font_unicode_asian">Unicode Asian</option>
									<option value="arabic" class="localize font_arabic">Arabic</option>
									<option value="custom">Custom Font - none</option> <!-- TODO : localize -->
								</select>
								<div id="ascii_small_description" style="font-size: 80%">
									<span class="localize font_ascii_small_description">Small font limited to ASCII, which includes English characters and some symbols.</span>
								</div>
								<div id="unicode_european_small_description" style="font-size: 80%">
									<span class="localize font_unicode_european_small_description">Small font with some unicode support. Includes characters for most European languages.</span>
								</div>
								<div id="unicode_european_large_description" style="font-size: 80%">
									<span class="localize font_unicode_european_large_description">Large font with more unicode support. Includes characters for all European languages.</span>
								</div>
								<div id="unicode_asian_description" style="font-size: 80%">
									<span class="localize font_unicode_asian_description">Large font which includes characters for Asian languages such as Chinese, Japanese, and Korean.</span>
								</div>
								<div id="arabic_description" style="font-size: 80%">
									<span class="localize font_arabic_description">Pixel font with Arabic characters</span>
								</div>
								<div id="custom_description" style="font-size: 80%">
									<span class="localize font_custom_description">Upload your own custom font in the ".bitsyfont" format!</span>
									<br/>
									<label for="importFontPicker" class="filePickerLabel" title="import font from bitsyfont file on your computer">
										<span class="bitsy_icon">upload</span>
										<span class="localize upload_font">upload font</span>
									</label>
									<input title="import font from bitsyfont file on your computer" type="file" accept=".bitsyfont" id="importFontPicker" style="display:none;" onchange="importFontFromFile(event);"/>
								</div>
								<div style="margin-top:3px;">
									<button title="download font file" class="color0" onclick="exportFont();">
										<span class="bitsy_icon">download</span>
										<span class="localize download_font">download font</span>
									</button>
								</div>
								<div>
									<span class="localize text_direction_label">text direction</span>:
									<select id="textDirectionSelect" onchange="on_change_text_direction(event);">
										<option value="LTR" class="localize text_direction_ltr">Left to Right</option>
										<option value="RTL" class="localize text_direction_rtl">Right to Left</option>
									</select>
								</div>
								<div style="font-size: 80%">
									<span class="localize text_direction_description">Option for languages that read right to left</span>
								</div>
								<div style="margin-top: 5px;">
									<span class="bitsy_icon">text_edit</span>
									<span title="textbox graphics mode" class="localize setting_text_mode">text mode</span>:
									<select id="textModeSelect" title="select resolution of textbox pixels" onchange="onChangeTextMode(event);">
										<option value="TXT_HIREZ" title="2x pixel resolution" class="localize setting_text_hirez">default</option>
										<option value="TXT_LOREZ" title="1x pixel resolution" class="localize setting_text_lorez">chunky</option>
									</select>
								</div>
							</div>
							<div class="bitsy-menu-group">
								<!-- todo : localize -->
								<span>export settings</span>
							</div>
							<div class="controlBox">
								<span class="localize option_page_color">html page color:</span>
								<br/>
								<input title="pick background color for exported html page" type="color" value="#ffffff" id="pageColor" onchange="on_change_color_page();" autocomplete="off">
							</div>
							<div class="controlBox">
								<form>
									<span class="localize option_window_size">game window size:</span>
									<br/>
									<input type="radio" name="export size" value="full" onclick="chooseExportSizeFull();" id="exportSizeOptionFull" checked>
									<label title="game window resizes to fill page (mobile friendly)" for="exportSizeOptionFull" class="left">
										<span class="bitsy_icon">pagesize_full</span>
										<span class="localize option_full_size">full page</span>
									</label>

									<input type="radio" name="export size" value="fixed" onclick="chooseExportSizeFixed();" id="exportSizeOptionFixed">
									<label title="game window stays a fixed size" for="exportSizeOptionFixed" class="right">
										<span class="bitsy_icon">pagesize_fixed</span>
										<span class="localize option_fixed_size">fixed size</span>
									</label>

									<div style="margin-top:5px;">
										<span class="controlBox" id="exportSizeFixedInputSpan" style="display:none;">
											<input type="number" min="0" value="512" style="width:60px;" id="exportSizeFixedInput"> px
										</span>
									</div>
								</form>
							</div>

						</div>
					</div>
				</div>

			</div> <!-- Editor Content -->
		</div> <!-- Editor Window -->

		</div>

	</body>

</html>